// 1、引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development", // 设置当前的环境 development表示开发环境
    entry: "./src/main.js",
    plugins: [
        new HtmlWebpackPlugin({
            // 配置插件根据 自己创建的html为模块进行打包
            template: "./public/index.html"
        })
    ],
    module: {
        rules: [ // 加载器 
            {
                test: /\.css$/, // 表示匹配到以.css为后缀的文件
                // 注意：两个loader的顺序不能调换，因为必须先通过css-loader处理css类型文件
                // 然后再通过style-loader将样式插入到DOM中
                // webpack读取代码是从上到下，从右到左的，因此必须先写style-loader再写css-loader
                use: ["style-loader", "css-loader"] // 表示使用何种加载器来处理css文件
            },
            { // 配置less
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            { // 配置处理图片
                // webpack5提供了asset module技术，直接设置type: 'asset'即可处理图片，而不需要额外的loader
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset'
            },
            { // 处理字体图标文件
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: "asset/resource",
                generator: {
                    // [name] 表示获取到原来的文件名
                    // [hash:6] 表示生成6位数的哈希值
                    // 哈希值：就是由数字和字母构成的随机数
                    // [ext]: 表示获取到原文件的后缀名
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            { // js语法降级处理
                test: /\.js$/,
                exclude: /node_modules/, // 排除匹配node_modules里面的js文件
                use: {
                    loader: "babel-loader",
                    options: { // 给loader添加额外的参数
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },
    devServer: { // 配置开发服务器的属性
        port: 3000,     // 修改端口号，默认8080 
        open: true      // true 表示当我们启动服务器的时候会自动帮我们打开浏览器并运行项目
    }
}
/**
 * 总结html-webpack-plugin的使用
 * 为什么要用？
 *  此插件能自定生成html文件，并自动引入打包后的html文件
 * 使用步骤
 *  1、下载 npm i html-webpack-plugin -D
 *  2、在配置文件中引入，并进行配置（配置如上）
 *  3、npm run build进行打包，然后看效果
 *  4、打包 看效果
 * 
 * **/ 